
.highlight {
    --code-foreground : #555;
    --code-background  : #eee;
    --code-font-size: 14;
    --line-height-code-block     : 1.6;
    --code-font-family: consolas, Menlo, "PingFang SC", "Microsoft YaHei", monospace;
    --code-border-radius: 3px;
    --highlight-diffdeletion: #c7ffd7;
    --highlight-diffaddition: #ffd3d8;
}
pre,
.highlight {
    overflow: auto;
    margin: 20px 0;
    padding: 0;
    font-size: var(--code-font-size);
    color: var(--highlight-foreground);
    background: var(--highlight-background);
    line-height: var(--line-height-code-block);
}

pre,
code {
    font-family: var(--code-font-family);
}

code {
    padding: 2px 4px;
    word-wrap: break-word;
    color: var(--code-foreground);
    background: var(--code-background);
    border-radius: var(--code-border-radius);
    font-size: var(--code-font-size);
}

pre {
    padding: 10px;
}

pre code {
    padding: 0;
    color: var(--highlight-foreground);
    background: none;
    text-shadow: none;
}

.highlight {
    border-radius: 1px;
}

.highlight pre {
    border: none;
    margin: 0;
    padding: 10px 0;
}

.highlight table {
    margin: 0;
    width: auto;
    border: none;
}

.highlight td {
    border: none;
    padding: 0;
}

.highlight figcaption {
    font-size: 1em;
    color: var(--highlight-foreground);
    line-height: 1em;
    margin-bottom: 1em;
}

.highlight figcaption a {
    float: right;
    color: var(--highlight-foreground);
}

.highlight figcaption a:hover {
    border-bottom-color: var(--highlight-foreground);
}

.highlight .gutter pre {
    padding-left: 10px;
    padding-right: 10px;
    color: var(--highlight-gutter-color);
    text-align: right;
    background-color: var(--highlight-gutter-bg-color);
}

.highlight .code pre {
    width: 100%;
    padding-left: 10px;
    padding-right: 10px;
    background-color: var(--highlight-background);
}

.highlight .line {
    height: 20px;
}

.gutter {
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.gist table {
    width: auto;
}

.gist table td {
    border: none;
}

pre .deletion {
    background: var(--highlight-deletion);
}

pre .addition {
    background: var(--highlight-addition);
}

pre .meta {
    color: var(--highlight-purple);
}

pre .comment {
    color: var(--highlight-comment);
}

pre .variable,
pre .attribute,
pre .tag,
pre .regexp,
pre .ruby .constant,
pre .xml .tag .title,
pre .xml .pi,
pre .xml .doctype,
pre .html .doctype,
pre .css .id,
pre .css .class,
pre .css .pseudo {
    color: var(--highlight-red);
}

pre .number,
pre .preprocessor,
pre .built_in,
pre .literal,
pre .params,
pre .constant,
pre .command {
    color: var(--highlight-orange);
}

pre .ruby .class .title,
pre .css .rules .attribute,
pre .string,
pre .value,
pre .inheritance,
pre .header,
pre .ruby .symbol,
pre .xml .cdata,
pre .special,
pre .number,
pre .formula {
    color: var(--highlight-green);
}

pre .title,
pre .css .hexcolor {
    color: var(--highlight-aqua);
}

pre .function,
pre .python .decorator,
pre .python .title,
pre .ruby .function .title,
pre .ruby .title .keyword,
pre .perl .sub,
pre .javascript .title,
pre .coffeescript .title {
    color: var(--highlight-blue);
}

pre .keyword,
pre .javascript .function {
    color: var(--highlight-purple);
}
